<!doctype html>
{php}
$static = '/static/home/';
{/php}
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/register.css" rel="stylesheet" type="text/css" />
</head>
<body>

{include file='public/header'}

<div class="register-box">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="card">
                    <form class="js-ajax-form">
                    <div class="card-body p-3">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs text-right" role="tablist">
                            <li class="nav-item waves-effect waves-light">
                                <a class="nav-link active" data-toggle="tab" href="#user-phone" role="tab">
                                    <span class="d-none d-md-inline-block">手机号注册</span>
                                </a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="nav-link" data-toggle="tab" href="#user-email" role="tab">
                                   <span class="d-none d-md-inline-block">邮箱注册</span>
                                </a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content p-3">
                            <div class="tab-pane active" id="user-phone" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group mb-4">
                                            <label>手机号</label>
                                            <input type="text" class="form-control" name="phone" autocomplete="new-password" placeholder="请输入11位手机号码">
                                            <em for="phone" class="invalid"></em>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label>验证码</label>
                                            <div class="row">
                                                <div class="col-xl-9">
                                                    <input type="text" class="form-control" name="phoneCode" autocomplete="new-password" placeholder="请输入验证码">
                                                    <em for="phoneCode" class="invalid"></em>
                                                </div>
                                                <div class="col-xl-3 text-right">
                                                    <a href="javascript:void(0)" class="btn btn-primary" id="getCode">获取验证码</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label>密　码</label>
                                            <input type="password" class="form-control" name="password1" autocomplete="new-password" placeholder="请输入密码">
                                            <em for="password1" class="invalid"></em>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="user-email" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group mb-4">
                                            <label>邮箱地址</label>
                                            <input type="text" class="form-control" name="email" autocomplete="new-password" placeholder="请输入邮箱地址abc@yawkckw.com">
                                            <em for="email" class="invalid"></em>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label>验证码</label>
                                            <div class="row">
                                                <div class="col-xl-9">
                                                    <input type="text" class="form-control" name="emailCode" autocomplete="new-password" placeholder="请输入验证码">
                                                    <em for="emailCode" class="invalid"></em>
                                                </div>
                                                <div class="col-xl-3 text-right">
                                                    <a href="javascript:void(0)" class="btn btn-primary" id="getEmailCode">获取验证码</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label>密　码</label>
                                            <input type="password" class="form-control" name="password2" autocomplete="new-password" placeholder="请输入密码">
                                            <em for="password2" class="invalid"></em>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group-box">
                            <input type="hidden" name="tag" value="register" />
                            <button class="btn btn-primary btn-block waves-effect waves-light js-ajax-submit" type="submit">注 册</button>
                        </div>
                        <div class="form-group-box">
                            已有账号？<a href="{:url('user/login')}" >去登录</a>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
</div>


<!-- JAVASCRIPT -->
<script src="{$static}libs/jquery/jquery.min.js"></script>
<script src="{$static}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{$static}libs/metismenu/metisMenu.min.js"></script>
<script src="{$static}libs/simplebar/simplebar.min.js"></script>
<script src="{$static}libs/node-waves/waves.min.js"></script>

<script src="{$static}libs/layer/layer.js"></script>
<script src="{$static}js/pages/jquery.validate.min.js"></script>
<script src="{$static}js/getCode.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".js-ajax-form").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            emailCode: {
                required: true,
            },
            phone: {
                required: true,
            },
            phoneCode: {
                required: true
            },
            password1: {
                required: true,
                minlength: 8,
                maxlength: 32
            },
            password2: {
                required: true,
                minlength: 8,
                maxlength: 32
            }
        },

        messages: {
            email: {
                required: "请输入邮箱地址",
                email: "您输入的邮箱地址无效",
            },
            emailCode: {
                required: "请输入邮箱验证码",
            },
            phone: {
                required: "请正确填写您的手机号码",
            },
            phoneCode: {
                required: "无效的验证码"
            },
            password1: {
                required: "请输入密码",
                minlength: "密码的长度至少为8位",
                maxlength: "密码的长度请不要超过32位"
            },
            password2: {
                required: "请输入密码",
                minlength: "密码的长度至少为8位",
                maxlength: "密码的长度请不要超过32位"
            }
        },
        beforeSend: function() {
            $('.js-ajax-form').text('正在注册...').addClass('btn-secondary').attr('disabled', 'disabled');
        },
        submitHandler: function() {
            var href = $(".nav-link.active").attr('href');
            if(href === '#user-phone') {
                var data = {
                    phone: $('input[name=phone]').val(),
                    phoneCode: $('input[name=phoneCode]').val(),
                    password1: $('input[name=password1]').val(),
                    tag: $('input[name=tag]').val()
                };
            }else{
                var data = {
                    email: $('input[name=email]').val(),
                    emailCode: $('input[name=emailCode]').val(),
                    password2: $('input[name=password2]').val(),
                    tag: $('input[name=tag]').val()
                };
            }
            $.ajax({
                url: "{:url('user/registerAjax')}",
                type: "POST",
                data: data,
                dataType: 'json',
                async: false,
                success: function (res) {
                    if (res.errorCode === 200) {
                        layer.confirm('账号注册成功,确认跳转登录', {
                            btn:['确认','取消'],
                            success:function(){
                                this.enterEsc = function (event) {
                                    if (event.keyCode === 13) {
                                        $(".layui-layer-btn0").click();
                                        return false;
                                    }
                                };
                                $(document).on('keydown', this.enterEsc);

                                $(".layui-layer-btn0").on("click",function() {
                                    window.location.href = "{:url('user/login')}";
                                    return false
                                })
                            },
                            end:function(){
                                $(document).off('keydown',this.enterEsc);
                            }
                        });
                    } else {
                        layer.alert(res.message, {
                            title: '提示',
                            icon: 2
                        });
                    }
                }
            });
        }
    });
});

$('#getCode').on('click', function() {
    var data = {
        phone: $('input[name=phone]').val(),
        tag: $('input[name=tag]').val()
    };
    var phoneValidate = $('em[for="phone"]');
    var phoneCodeValidate = $('em[for="phoneCode"]');
    if(!data.phone) {
        phoneValidate.css('display','block');
        phoneValidate.text('请输入11位手机号码');
        return false;
    }
    $.ajax({
        type : "POST",
        url  : "{:url('user/getPhoneCode')}",
        data : data,
        dataType: 'json',
        async: false,
        beforeSend: function() {
            if(typeof(undefined) != "undefined") {
                clearTimeout(countTimers);
                countdown = 0;
            }
            setSmsTimeOut();
        },
        success : function(res) {
            $('em.invalid').text('');
            if (res.errorCode === 200) {
                phoneCodeValidate.css('display','block');
                phoneCodeValidate.text('验证码已发送，请查收短信');
                countdown = 60;
            } else {
                phoneValidate.css('display','block');
                phoneValidate.text(res.message);
                $('#getCode').text(codeRegain).removeClass('btn-secondary').removeAttr('disabled');
                countdown = 0;
            }
        },
        complete: function() {
            $('#getCode').text(codeRegain).removeClass('btn-secondary').removeAttr('disabled');
        }
    });
});

$('#getEmailCode').on('click', function() {
    var emailValidate = $('em[for="email"]');
    var emailCodeValidate = $('em[for="emailCode"]');
    var data = {
        email: $('input[name=email]').val(),
        tag: $('input[name=tag]').val()
    };
    if(!data.email) {
        emailValidate.css('display','block');
        emailValidate.text('请输入邮箱地址');
        return false;
    }
    $.ajax({
        type : "POST",
        url  : "{:url('user/getEmailCode')}",
        data : data,
        dataType: 'json',
        async: false,
        beforeSend: function() {
            if(typeof(undefined) != "undefined") {
                clearTimeout(countTimers);
                countdown = null;
            }
            setSmsTimeOut($('#getEmailCode'));
        },
        success : function(res) {
            $('em.invalid').text('');
            if(res.errorCode === 200) {
                emailCodeValidate.css('display','block');
                emailCodeValidate.text('验证码已发送，请查收邮件');
                countdown = 60;
            } else {
                emailValidate.css('display','block');
                emailValidate.text(result.message);
                $('#getEmailCode').text(codeRegain).removeClass('btn-secondary').removeAttr('disabled');
                countdown = 0;
            }
        },
        complete: function() {
            $('#getEmailCode').text(codeRegain).removeClass('btn-secondary').removeAttr('disabled');
        }
    });
});
</script>
</body>
</html>
